<template>
  <Navbarheader />
  <div class="host-head">
    <el-avatar shape="circle" :size="200" fit="fill" :src="userInfo.avatarUrl" />
    <el-text style="font-size: 3em; color: darkorchid">{{ userInfo.username }}</el-text>
    <el-text> @{{ userInfo.username }}</el-text>
    <el-text class="host-topic"> {{ userInfo.intro }} </el-text>
  </div>
  <div class="host-bone"></div>
</template>
<script setup>
import Navbarheader from '@/components/userNavbar-header.vue'
import http from '@/http'
import { onMounted, ref } from 'vue'
const userInfo = ref('')
onMounted(async () => {
  try {
    userInfo.value = await http.get('/api/users/me')
  } catch (error) {
    console.error(error)
  }
})
</script>

<style scoped>
.host-head {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 2s ease;
}
.host-bone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 1s ease;
}
.host-topic {
  width: 40%;
  text-indent: 2em;
  white-space: pre-line;
  font-size: 1.1em;
  padding: 20px;
}
.host-content {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* --- 新增：移動端適配 --- */
@media (max-width: 768px) {
  .host-topic {
    width: 90%; /* 在小螢幕上，簡介寬度變為90% */
    padding: 10px;
  }
  .host-head {
    margin-top: 20px;
  }
}
</style>
